/**
 * Created with JetBrains PhpStorm.
 * User: vander
 * Date: 5/9/13
 * Time: 10:28 PM
 * To change this template use File | Settings | File Templates.
 */
var MyElement = Class.create({
    initialize: function(page, o){
        //page la page quan ly element nay va o la jsonObject
        this.page = page;
        this.id = "";

        this.divTag = new Element('div');
        $(this.divTag).setStyle({position: "absolute"});
        $(this.page.divTag).insert(this.divTag);

        this.initAttributeList(o)
    },
    initAttributeList: function(o){
        var _this = this;

        $j.each(o, function(){
            if(this.type == "id"){
                _this.id = this.value;
                $(_this.divTag).writeAttribute(this.key, this.value);
            }
            else if(this.type == "css"){
                var sty = new Object();
                sty[this.key] = this.value;
                $(_this.divTag).setStyle(sty);
            }
            else if(this.type == "image"){
                var imgTag = new Element("img");
                imgTag.setAttribute("src", _this.page.getResourcesPath() + this.value);
                imgTag.setStyle({width: "100%", height: "100%"});

                _this.divTag.insert(imgTag);
            }
            else if(this.type == "text"){
                var textTag = new Element("p");
                textTag.innerHTML = this.value;
                textTag.setStyle({"width": "100%", "height": "100%"});
                $j(_this.divTag).addClass("my-text");
                _this.divTag.insert(textTag);
            }
            else if(this.type == "onActivate"){
                if(this.value.action == "navigate"){
                    var pageId = this.value.navigate;
                    $j(_this.divTag).on("tap", function(event){
                        event.preventDefault();
                        _this.page.book.navigate(pageId);
                    });
                }
                else if(this.value.action == "animate"){
                    var animateName = this.value.animate;
                    $j(_this.divTag).on("tap", function(){
                        event.preventDefault();
                        var ani = new AnimateCSS(animateName);
                        ani.execute(_this);
                    });

                }
            }
        });
    }
});